<template>
    <div class="app-container app-strategy">
        <van-nav-bar title="AG趋势策略" left-arrow @click-left="$router.back()"></van-nav-bar>

        <div class="strategy-box">
            <div class="strategy-title">AG趋势策略 </div>
            
            <div class="strategy-desc">顾名思义就是对价格趋势变化的量化预警策略，策略最大特点就是能让你在单边行情中大大提升交易水平，建议配合异动策略使用</div>
            <div class="strategy-vip">
                <van-cell-group>
                    <van-cell :class="info.leftDays ? 'maincolor' : ''" title="策略状态" :value="info.pushStatus ? '订阅中' : '未订阅'" />
                    <van-cell title="订阅剩余" :value="`${info.leftDays}天`"/>
                    <van-cell v-if="info.leftDays" title="推送设置" label="注：关闭策略后，公众号将不在推送该策略，想要收到实时推送，请重新打开">
                        <template #right-icon>
                            <van-switch :model-value="isOpenPush" size="22px" @update:model-value="onUpdateValue"/>
                        </template>
                    </van-cell>
                </van-cell-group>
                
            </div>
            
            <div class="strategy-subtitle">策略提醒通知观摩</div>
            <div class="strategy-desc">观摩数据有延迟，获取实时提醒可订阅此策略</div>
            
            <div class="strategy-main">

            
                <van-pull-refresh v-model="listLoadState.loading" @refresh="onRefresh">
                    <!-- <van-tabs class="app-tabs" @click-tab="onSearch"> -->
                        <!-- 币种选择 -->
                        <div class="filter-item bi-list">
                            <span v-for="item in biList" :key="item"  :class="currentBi === item ? 'select' : ''" @click="handleSelectBi(item)">{{ item }}</span>
                        </div>
                        <!-- 时间选择 -->
                        <div class="filter-item time-list">
                            <van-swipe :loop="false" indicator-color="white" :width="78" :show-indicators="false">
                                <van-swipe-item  v-for="(item,index) in timeList" :key="index" > 
                                    <div class="swipe-item swipe-time" :class="currentTime === item ? 'select' : ''" @click="handleSelectTime(item)">{{ timeObj[item] }}</div>
                                </van-swipe-item>
                            </van-swipe>
                            
                        </div>
                        <!-- 列表数据 -->
                        <van-list v-model:loading="listLoadState.loadingMore" :finished="listLoadState.finished"
                            finished-text="没有更多数据" @load="onLoadMore">
                            <!-- <van-tab title="BTC/USDT"> -->
                                <div class="msg-item" v-for="item in list" :key="item.id">
                                    <p class="item-title"><span>推送内容：</span>{{ text(item)[0] }}</p>
                                    <p><span class="item-title">推送价格：</span>{{ text(item)[1] }}</p>
                                    <p><span class="item-title">推送止盈：</span>{{ text(item)[2] }}</p>
                                    <p><span class="item-title">推送止损：</span>{{ text(item)[3] }}</p>
                                    <p><span class="item-title">推送时间：</span>{{ item.createTime }}</p>
                                </div>
                            <!-- </van-tab> -->
                        </van-list>
                    <!-- </van-tabs> -->
                </van-pull-refresh>
            </div>   
            
        </div>
        <div class="strategy-footer">
            <div class="footer-tip">策略仅供参考，不代表实盘</div>
            <div class="footer-main">
                <van-button plain type="primary" @click="$router.push('/setting/vipcenter')">单独订阅</van-button>
                <van-button type="primary" @click="$router.push('/setting/vipcenter')">一卡通订阅</van-button>
            </div>
        </div>

    </div>
</template>
  
<script>
import { utilsMixin } from '@/mixin/utils'
import { query } from '@/api/alertLog'
import { getStrategyDetail } from '@/api/strategy'
import { pushStateUpdate } from '@/api/user'
import { showConfirmDialog } from 'vant';
import { showSuccessToast } from 'vant'
const timeObj = {
    1: '5分钟',
    2: '15分钟',
    3: '30分钟',
    4: '1小时',
    7: '2小时',
    5: '4小时',
    8: '6小时',
    9: '12小时',
    6: '日线'
};
export default {
    name: 'ag-trend',
    mixins: [utilsMixin],
    data() {
        return {
            info: {
                desc: '',
                leftDays: '',
                pushStatus: '',
                subscribeType: '',
                title: '',
            },
            isOpenPush: true,
            currentTime: 1,
            biList: ['BTC/USDT', 'ETH/USDT', 'LTC/USDT'],
            currentBi: 'BTC/USDT',
            timeList: [1, 2, 3, 4, 7, 5, 8, 9, 6],
            timeObj,
            list: [],
            listQuery: {
                page: 1,
                pageSize: 10,
                token: 'BTC/USDT',
                period: 1,
                strategyId: ''
            },
            listLoadState: {
                loading: false,
                loadingMore: false,
                finished: false,
            },
        }
    },
    mounted() {
        console.log('ag-trend3')
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            this.listQuery.strategyId = this.$route.query.id;
            this.getStrategyDetail()
            this.fetch()
        },
        onUpdateValue(value) {
            console.log('onUpdateValue=======', value);
            if (!value) {
                // 关闭的时候给对应提示
                showConfirmDialog({
                    title: '温馨提示',
                    message: '关闭策略后，公众号将不在推送该策略，想要收到实时推送，请重新打开。',
                }).then(() => {
                    this.saveStatus(0)
                    
                });
            } else {
                this.saveStatus(1);
            }
            
        },
        saveStatus(status) {
            pushStateUpdate({
                strategyId: this.listQuery.strategyId,
                status: status,
            }).then(res => {
                if (res.code === 20000) {
                    this.isOpenPush = !!status;
                    if (status) {
                        showSuccessToast('设置成功');
                    }
                }
            })
        },
        getStrategyDetail() {
            getStrategyDetail({ id: this.listQuery.strategyId }).then(res => {
                if (res.code === 20000) {
                    // res.data.pushStatus = true;
                    this.info = res.data;
                    this.isOpenPush = !!res.data.pushStatus;
                }
            })
        },
        fetch() {
            this.loading = true
            query(this.listQuery).then(res => {
                if (res.code === 20000) {
                    const data = res.data
                    this.list = this.list.concat(data.records)
                    this.clearLoading(data.records.length < data.size)
                }
            }).catch(() => {
                // this.clearLoading()
            })
            // if (!this.wxOpenId) {
            //     getWxAppInfo().then(response => {
            //         if (response.success && response.data != null) {
            //             const data = response.data
            //             const appid = data.appId
            //             const host = location.href.split('#')[0] + 'wx/redirect/' + appid
            //             const url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + encodeURIComponent(host) + '&response_type=code&scope=snsapi_base&state=123#wechat_redirect'
            //             location.href = url
            //         }
            //     })
            // }
        },
        handleSelectBi(item) {
            this.currentBi = item;
            this.onSearch();
        },
        handleSelectTime(item) {
            this.currentTime = item;
            this.onPeriod(item);
        },
        text(row) {
            return row.title.split('，')
        },
        onPeriod(period) {
            this.listQuery.period = period
            this.onRefresh()
        },
        // 查询
        onSearch() {
            console.log('=====onSearch')
            this.listQuery.token = this.currentBi;
            this.onRefresh()
        },
        onLoadMore() {
            console.log('=========onLoadMore');
            this.listQuery.page += 1
            this.listLoadState.loadingMore = true
            this.fetch()
        },
        onRefresh() {
            if (!this.listLoadState.loading) {
                this.listLoadState.loading = true
            }
            this.list = []
            this.listQuery.page = 1
            this.fetch()
        },
        clearLoading(finished) {
            this.listLoadState.loading = false
            this.listLoadState.loadingMore = false
            this.listLoadState.finished = finished
        },
    },
    computed: {
    },
}
</script>